<template>
  <div>
    <hr />
    <h1>学习指令 v-text v-html v-once 绑定事件</h1>
    <h2>{{ info }}</h2>
    <!-- v-text 将文本作为字符串解析，即使其中包含标签，也是作为字符串解析 
    v-text安全
    -->
    <h2 v-text="answer1"></h2>
    <!-- <div class="box"></div> -->
    <!-- v-html 将文本作为字符串解析  如果文本中包含标签，按照html解析 v-html不安全 -->
    <h2 v-html="answer2"></h2>
    <h2>{{ msg }}</h2>
    <!-- v-on绑定事件  v-on:事件名=回调函数的名字 v-on可以简写为@-->
    <!-- <button v-on:click="changeAnswer">切换回答</button> -->
    <button @click="changeAnswer">切换回答</button>

    <h1>{{ flag ? "好的" : "你是个好人" }}</h1>

    <!-- 当语句简单时可以直接在标签写事件 -->
    <button @click="flag = !flag">更改flag的值</button>
    <h1>{{ flag }}</h1>
    <button @click="count += 5">更改count值</button>
    <h1>{{ count }}</h1>
    <!-- 绑定的回调函数是否可以传参 -->
    <button @click="hanhan">绑定事件测试参数问题</button>
    <button @click="hanhan1($event)">绑定事件测试参数问题111</button>
    <button @click="hanhan2($event, '老子天下第一')">
      绑定事件测试参数问题222
    </button>
    <button @click="hanhan3('周乐乐，佩服佩服')">
      绑定事件测试参数问题333
    </button>
    <button
      @click="
        lele();
        lele1();
      "
    >
      一个事件绑定多个回调函数
    </button>
    <!-- 一个元素绑定多个事件 -->
    <button @click="lele" @mousedown="lele1">一个元素绑定多个事件</button>
    <!-- 阻止浏览器默认行为 最常见的就是a链接跳转 使用修饰符 .prevent-->
    <a href="http://baidu.com" @click.prevent>百度一下</a>
    <!-- 事件冒泡事件 -->
    <div class="wrap" @click="wrapTest">
      <div class="inner" @click.stop="innerTest"></div>
    </div>
    <hr />
    <h1>v-once</h1>
    <!-- v-once 实现一次性插入，当值更改时，就不会在发生改变 -->
    <h1 v-once>{{ msg1 }}</h1>
    <button @click="changeMsg1">更改msg1的值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      info: "洋洋还困吗？",
      /*  answer1: "不困了",
      answer2: "我还困呢！！", */
      answer1: "<h1>不困了</h1>",
      answer2: "<h1>我还困呢！！</h1>",
      msg: "你嫁给我吧？",
      //  好的
      // 你是个好人
      flag: true,
      //   需求是当前有个按钮 点击 回答可以切换你是个好人？
      // 按钮 绑定事件进行切换
      // 如何绑定事件
      msg1: "今天暖和吗？",
    };
  },
  methods: {
    changeAnswer() {
      console.log("测试事件是否执行");
      //切换回答的本质是flag值的改变
      console.log(this);
      //   this执行组件对象
      // data当中的值都作为组件对象的属性
      console.log(this.flag);
      this.flag = !this.flag;
    },
    hanhan(e) {
      console.log("这是涵涵的回调函数的名字");
      console.log(e); //当@click=hanhan  对应的回调函数hanhan(e)这个e是事件对象event
    },
    hanhan1(e) {
      console.log("这是涵涵的回调函数的名字11");
      console.log(e); //当@click=hanhan()如果想获取事件对象event，需要将$event传入，否则获取不到
    },
    hanhan2(e, str) {
      console.log("这是涵涵的回调函数的名字11");
      console.log(e); //当@click=hanhan()如果想获取事件对象event，需要将$event传入，否则获取不到
      console.log(str);
    },
    hanhan3(str) {
      console.log(str);
    },
    lele() {
      console.log("乐乐");
    },
    lele1() {
      console.log("乐乐1");
    },
    wrapTest() {
      console.log("我是外面的盒子");
    },
    innerTest() {
      console.log("我是里面的盒子");
    },
    changeMsg1() {
      console.log(this.msg1);
      this.msg1 = "今天很冷";
    },
  },
};
</script>

<style lang="less" scoped>
.wrap {
  width: 100px;
  height: 100px;
  background-color: red;
}
.inner {
  width: 50px;
  height: 50px;
  background-color: yellow;
}
</style>